<template>
  <match-parent class="message-private-contact-list">
    <div class="col-adapter">
      <div class="query-box">
        <mu-text-field v-model="keyword" full-width class="query-input" action-icon="search" type="text"></mu-text-field>
      </div>
      <match-parent>
        <scroll-up :has-more="hasMore" :loading="loading" @load="loadMore">
          <mu-list>
            <mu-list-item v-for="item in showContacts" :key="item.right_id" avatar button :ripple="true" @click="handleClick(item)">
              <mu-list-item-action>
                <mu-avatar>
                  <img :src="item.avatar_url">
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-title>{{ item.realname }}</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </scroll-up>
      </match-parent>
    </div>
  </match-parent>
</template>

<script>
import MatchParent from '@/components/MatchParent'
import ScrollUp from '@/components/ScrollUp'
import { mapGetters } from 'vuex'
import { contactListFixAvatar } from './util'

export default {
  name: 'MessagePrivateContactList',
  components: {
    MatchParent,
    ScrollUp
  },
  data() {
    return {
      showCount: 20,
      loading: false,
      keyword: ''
    }
  },
  computed: {
    ...mapGetters({
      contacts: 'contacts'
    }),
    source() {
      let source = this.contacts
      if (this.keyword.length > 0) {
        const reg = new RegExp(this.keyword)
        source = source.filter(it => reg.test(it.realname))
      }
      return source
    },
    showContacts() {
      return this.source.slice(0, this.showCount).map(contactListFixAvatar)
    },
    hasMore() {
      return this.showCount < this.source.length
    }
  },
  methods: {
    loadMore() {
      this.loading = true
      setTimeout(() => {
        this.showCount += 10
        this.loading = false
      }, 200)
    },
    // 点击某个消息行
    handleClick({ id }) {
      this.$emit('chat', id)
    }
  }
}
</script>

<style scoped>
.col-adapter{
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
.query-box {
  height: 50px;
}
.query-input {
  padding-bottom: 4px;
  margin-bottom: 0;
}
</style>
